﻿@section header
{<!-- Bellows Styles -->
<link href="~/Themes/Common/assert/plugins/flexSlider-2.2.2/flexslider.css?version=1.2.6" rel="stylesheet" />
<link href="~/Themes/RongJi/Style/plugins/zoomer/jquery.fs.zoomer.css?version=1.2.6" rel="stylesheet" />
<link href="~/Themes/RongJi/Style/base/css/details.css?version=1.2.6" rel="stylesheet" />
<link href="~/Themes/RongJi/Style/plugins/swipebox/css/swipebox.min.css" rel="stylesheet" />
<style>
    .innerwrapper, .pageHeaderMini {
        display: none;
    }

    #tabs-1 img {
        width: 100%;
        height: auto;
    }
</style>
}
@model RiderShop.Mobile.Modle.ProductModel
@section title
{
     @if (Model.Product != null)
     {
        @Model.Product.Title
     }
     else
     {
         @Html.Raw("暂无商品");
     }
}
@section pagetitle
{
     @if (Model.Product != null)
     {
        @Model.Product.Title
     }
     else
     {
         @Html.Raw("暂无商品");
     }
}
@if (Model.Product == null)
{
    @Html.Raw("暂无商品");
}
else
{
<div>
    <!--Begin Header-->
    <header class="pageHeaderMiniS">
        <!-- InstanceBeginEditable name="pageTop" -->
        <img src="~/Themes/RongJi/Style/base/imgs/details_toolbar1.png" style="width: 100%; height: auto" id="favorityThis">
        <a onclick="historyGoback()" href="javascript:void(0)" class="goback">返回</a>
        <ul class="share_fav">
            <a href="#" onclick="AddFavority('@Model.Product.ProductId','@Model.Product.UnitPrice','~/Product/ProductDetail?prd=@Model.Product.ProductId')">
                <li id="addToFav">收藏</li>
            </a>
            <li id="addToShare">分享</li>
        </ul>
        <!-- InstanceEndEditable -->
    </header>

    <!--End Header-->
    <!-- InstanceBeginEditable name="body" -->
    <div class="pruduct_summary" id="pruduct_summary">
        <div class="flexslider">
            <ul class="slides">
                @foreach (var item in @Model.Product.ImageList)
                {
                <li>
                    <img src="@item.ImageName" />
                </li>
                }
            </ul>
        </div>
        <div class="summary">
            <h2>@Model.Product.Title</h2>
            <h3>@Model.Product.LineDescription</h3>
            <div class="price">蓉记鲜享价：￥@Model.Product.UnitPrice</div>
            <div class="ratings">

                    <span class="@Html.Raw("star" + @Model.Product.CommentStar)"></span>

            </div>
        </div>
        <div class="specs" id="groupPropertyPanel">
        </div>
        <div class="dragToShow" id="dragToShow">
            <button class="btn btn-success" id="btnDsipalyDescription"><i class="glyphicon glyphicon-chevron-up"></i>上拉查看商品详情</button>
        </div>
    </div>

    <!-- InstanceEndEditable -->
    <!--Begin Footer-->

    <footer>
        <div class="innerwrapper2">
            <div class="footer_bg">
                <div class="footer_bg_top">
                    <img src="~/Themes/RongJi/Style/base/imgs/footer_bg_top.png">
                </div>
                <div class="footer_bg_body">
                    <img src="~/Themes/RongJi/Style/base/imgs/footer_bg.png">
                    <div class="counter_toolbar">
                        <span class="cartQty">数量：</span>
                        <a class="noDirect num-operating plus" href="javascript:void(0)" id="pndbtnAdd" data-max="100" data-maxperuser="0">
                            <img src="~/Themes/RongJi/Style/base/imgs/plus.png" alt="+">
                        </a>
                        <input id="quantity" class="total_count s-input" type="text" name="total_count" autocomplete="off" maxlength="3" value="1">
                        <a class="noDirect num-operating minus" href="javascript:void(0)" data-min="1" id="pndbtnReduce">
                            <img src="~/Themes/RongJi/Style/base/imgs/minus.png" alt="-">
                        </a>

                        @if (@Model.Product.TotalInventory > 0)
                        {
                            if (Model.Product.Active)
                            {
                        <button class="addToCart" id="addToCart">加入购物篮</button>
                            }
                            else
                            {
                        <button class="noHasQutrty">商品已下架</button>
                            }
                        }
                        else
                        {
                        <button class="noHasQutrty">暂时缺货</button>
                        }
                    </div>
                    <div class="shopcart_icon">
                        <span>购物车</span>
                        <a href="../purchase/shoppingCart">
                            <div class="cart_badge">
                                <img src="~/Themes/RongJi/Style/base/imgs/shopcart_empty.png">
                                <em class="badge"></em>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <input type="hidden" id="imageDomain" value="@Kevin.Shop.Business.Service.Entity.Helper.WebClientContext.Current.FileServerDomain">
    <!--End Footer-->
</div>
<div id="imageDetailView" onclick="javascript:$(this).hide()">
    <div>
        <img />
    </div>
</div>
    
    @section footer
    {
<script src="~/Themes/Common/assert/plugins/flexSlider-2.2.2/jquery.flexslider-min.js?version=1.2.6"></script>
<script src="~/Themes/RongJi/Style/plugins/zoomer/jquery.fs.zoomer.min.js?version=1.2.6"></script>
<script src="~/Themes/RongJi/Style/plugins/juicer-min.js?version=1.2.6"></script>
<script src="~/Themes/RongJi/Style/plugins/swipebox/lib/ios-orientationchange-fix.js"></script>
<script src="~/Themes/RongJi/Style/plugins/swipebox/js/jquery.swipebox.js"></script>
@*<script src="~/Themes/RongJi/Style/base/js/details.js?version=1.2.6"></script>*@
<script>
    function historyGoback() {
        if (history.length <= 1) {
            window.location.href = "/product/ProductList";
        }
        else {
            history.go(-1);
        }
    }
</script>
<script>
    var isShowDescription = true;
    var isChickComment = false;
    var totalPage = 0;
    var totalBestAndGoodCommentPage = 0;
    var totalNormalCommentPage = 0;
    var totalBadAndWorstCommentPage = 0;
    var ele_div_nav_fixed;//html objict,因为html object才有offsetTop属性
    var ele_div_nav;
    var hasElement = false;

    //添加收藏
    var AddFavority = function ($productId, $unitPrice, $returnUrl) {
        var $url = "AddFavority?productId=" + $productId + "&unitPrice=" + $unitPrice + "&returnUrl=" + $returnUrl;
        var $result = $.ajax({
            url: $url,
            async: false
        }).responseText;
        $result = $.parseJSON($result);
        if ($result.Status == true && $result.ErrorMessage == null) {
            window.location.href = "../Customer/Login?ReturnUrl=" + $returnUrl;
            return;
        }
        else if ($result.Status == true && $result.ErrorMessage == "ok") {
            KevinShop.MessageBox.Success("收藏成功！");
            //收藏成功桃心变成红色
            $("#favorityThis").attr("src", "/Themes/RongJi/Style/base/imgs/details_toolbar3.png");
        } else if ($result.Status == false && $result.ErrorStatusCode == "404") {
            window.location.href = "../Customer/Login?ReturnUrl=" + $result.ErrorMessage;
        } else if ($result.ErrorMessage == "existsProduct") {
            KevinShop.MessageBox.Warning("您已收藏过此商品！");
        } else {
            KevinShop.MessageBox.Warning($result.ErrorMessage);
        }
    };

    //根据属性选择一个商品,并重新跳转到一个商品详情页面
    function changeProduct(dd) {
        $('li[name="' + $(dd).attr('name') + '"]').each(function () {
            if ($(this).text() != dd.innerHTML) {
                this.className = "unselected";
            }
        });
        dd.className = "selected";
        var selectPropertyString = '';
        $(".selected").each(function () {
            selectPropertyString += $(this).text() + ',';
        });
        $.ajax({
            type: "GET",
            url: "GetSelectPropertyProduct?productId=@Model.Product.ProductId&selectProperty=" + selectPropertyString,
            dataType: "JSON",
            success: function (response) {
                if (response != null && response != "") {
                    window.location.href = "/Product/ProductDetail?prd=" + response;
                }
                else {
                    KevinShop.MessageBox.Alert('该商品没有您选择的型号,请重新选择!');
                    window.location.href = "/Product/ProductDetail?prd=@Model.Product.ProductId";
                }
            },
            error: function (err) {
                //KevinShop.MessageBox.Alert(err.responseText);
                return;
            }
        });
    };

    //切换'商品详情','商品属性','评价' tab
    function changeDetailTable(thi, evt, index) {
        if (hasElement) {
            var fixed_top = ele_div_nav_fixed.offsetTop;
            var top = document.body.scrollTop;
            if (top > fixed_top) { document.body.scrollTop = fixed_top }
        }
        //商品详情
        if (index == 1) {
            $("#tabs-2").hide();
            $("#tabs-3").hide();
            $("#tabs-1").show();

            $("#productDescription").addClass('active');
            $("#productProperty").removeClass();
            $("#productComment").removeClass();
            isChickComment = false;
        }
        else if (index == 2) {//商品属性
            $("#tabs-1").hide();
            $("#tabs-3").hide();
            $("#tabs-2").show();

            $("#productProperty").addClass('active');
            $("#productDescription").removeClass();
            $("#productComment").removeClass();
            isChickComment = false;
        }
        else if (index == 3) {//商品评价
            $("#tabs-1").hide();
            $("#tabs-2").hide();
            $("#tabs-3").show();

            $("#productComment").addClass('active');
            $("#productDescription").removeClass();
            $("#productProperty").removeClass();
            isChickComment = true;
        }
    }

    /*---------------------显示对应类型的商品评论--------------------*/
    function displayProductComment(type) {
        if (type == 'bastAndGood') {
            $("#bastAndGoodComment").addClass('on');
            $("#badAndWorstComment").removeClass();
            $("#normalComment").removeClass();
            totalPage = totalBestAndGoodCommentPage;
            getProductComment('5,4', '好评', totalBestAndGoodCommentPage);
        }
        else if (type == 'normal') {
            $("#bastAndGoodComment").removeClass();
            $("#badAndWorstComment").removeClass();
            $("#normalComment").addClass('on');
            totalPage = totalNormalCommentPage;
            getProductComment('3', '中评', totalNormalCommentPage);
        }
        else if (type == 'badAndWorst') {
            $("#bastAndGoodComment").removeClass();
            $("#normalComment").removeClass();
            $("#badAndWorstComment").addClass('on');
            totalPage = totalBadAndWorstCommentPage;
            getProductComment('2,1', '差评', totalBadAndWorstCommentPage);
        }
    }

    /*---------------------得到商品评论--------------------*/
    function getProductComment(type, typeText, totalPage) {
        $("#reviewList").empty();
        $('#showMore').attr('page', 1);
        $('#showMore').attr('type', type);
        if (totalPage <= 1) {
            $("#showMore").hide();
        }
        else {
            $("#showMore").show().html('更多...');
        }
        $.ajax({
            type: "GET",
            url: "ProductCommentAjaxRequest?productId=@Model.Product.ProductId&type=" + type + "&pageIndex=0",
            dataType: "JSON",
            success: function (response) {
                if (response == null || response.Data.length <= 0) {
                    $("#reviewList").show().html('暂无评论');
                    return;
                }
                $.each(response.Data, function (key, value) {
                    $("#reviewList").append('<li>' +
                        '<div class="tboxs">' +
                        '<div class="avarta">' +
                        '<span class="img_wrap">' +
                        '<img width="50" src="/Themes/RongJi/Style/base/imgs/usercenter_head.jpg">' +
                        '</span>' +
                        '<p>' + value.CustomerName + '</p>' +
                        '<p style="align:center;"></p>' +
                        '</div>' +
                        '<div class="cells-title">' +
                        '<p class="comment_content">' + value.Title + '</p>' +
                        '<p>' + value.MemoForamt + '</p>' +
                        '<div class="star-line"><label class="re' + value.Rating + '" data-rate="5">' + value.RatingForamt + '</label></div>' +
                        '<label class="comment_time">' + value.InDateFormated + ' </label>' +
                        '</p>' +
                        '</div>' +
                        //'<div class="cells-details">' +
                        //'<div class="reply" null="">优点：' + value.MeritText + '</div>' +
                        //'<div class="reply" null="">不足：' + value.FaultsTextForamt + '</div>' +
                        //'</div>' +
                        getReviewImageHtml(value.ReviewImages) +
                        '</li>');
                });
            }
        });
    };

    var imageDomain = document.getElementById('imageDomain').value;
    function getReviewImageHtml(images) {
        var html = '';
        if (images && images.length > 0) {
            html = '<div class="clearfix"><ul id="reviewImageList" class="clearfix">';
            $.each(images, function (key, value) {
                if (value) {
                    html += ('<li>'
                         + '<a href="' + imageDomain + value + '" class="swipebox"><img src="' + imageDomain + value + '?imageView2/0/w/150">'
                         + '</a>'
                         +' </li>');
                }
            })
            html += '</ul></div>';
        }
        $('.swipebox').swipebox();
        return html;
    }

    function showImage(li) {
        var imageDetailView = $('#imageDetailView');
        var imageName = $(li).attr('data-imageName');
        $('img', imageDetailView).attr('src', imageDomain + imageName);
        imageDetailView.show();
    }

    $(function () {
        //初始化Slider
        $('.flexslider').flexslider({
            animation: "slide",
            animationSpeed: 800,
            slideshowSpeed: 2300,
            controlNav: true,
            directionNav: false,
        });

        //当页面加载的时候要看这个商品是否已经收藏过,如果已经收藏过那么桃心就变成红色
        var url = "GetUserFavorityByProductId?productId=@Model.Product.ProductId";
        var $result = $.ajax({
            url: url,
            async: false
        }).responseText;
        $result = $.parseJSON($result);
        if ($result.Status == true && $result.ErrorMessage == "alreadyFavority") {
            $("#favorityThis").attr("src", "/Themes/RongJi/Style/base/imgs/details_toolbar3.png");
        }

        //当页面加载的时候,如果购物车里有数量那么篮子是绿色,否则篮子是黑色
        KevinShop.Common.ShoppingCart.RefreshTotalQty();
        var total = KevinShop.Common.ShoppingCart.TotalQty;
        if (total > 0) {
            $('.cart_badge img').attr('src', '/Themes/RongJi/Style/base/imgs/shopcart_full.png');
        }
        else {
            $('.cart_badge img').attr('src', '/Themes/RongJi/Style/base/imgs/shopcart_empty.png');
        }

        //得到评价
        $(document).on("click", "#comment", function () {
            getProductComment('5,4', '好评', totalBestAndGoodCommentPage);
        });

        /*---------------------滑动--------------------*/
        $(window).bind("scroll", function () {
            if (hasElement == true) {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                if (top > ele_div_nav_fixed.offsetTop) {
                    ele_div_nav.addClass("fixed");
                }
                else {
                    ele_div_nav.removeClass("fixed");
                }
            }
            //滑动到底部
            if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                if (isShowDescription) {
                    isShowDescription = false;
                    $("#btnDsipalyDescription").text('正在加载详情...');
                    setTimeout(getProductDescription, 2000);
                }
                if (isChickComment) {
                    getMoreProductComment();
                }
            }
        });

        /*---------------------得到商品详情--------------------*/
        $('.dragToShow').on('click', function () {
            getProductDescription();
        });
        function getProductDescription() {
            $.ajax({
                type: "GET",
                url: "ProductDescriptionByAjaxRequest?productId=@Model.Product.ProductId",
                success: function (response) {
                    $("#btnDsipalyDescription").text('加载完毕');
                    $(".pruduct_summary").append(response);
                    $('#tabs-1').show();
                    $('#tabs-2').hide();
                    $('#tabs-3').hide();
                    $('#dragToShow').hide();

                    totalPage = $('#totalBestAndGoodCommentPage').val();
                    totalBestAndGoodCommentPage = $('#totalBestAndGoodCommentPage').val();
                    totalNormalCommentPage = $('#totalNormalCommentPage').val();
                    totalBadAndWorstCommentPage = $('#totalBadAndWorstCommentPage').val();

                    ele_div_nav_fixed = document.getElementById("div_nav_fixed");
                    ele_div_nav = $('#div_nav');
                    hasElement = true;
                    $("#tabs-1").css("min-height", ele_div_nav_fixed.offsetTop);
                    $("#tabs-2").css("min-height", ele_div_nav_fixed.offsetTop);
                    $("#tabs-3").css("min-height", ele_div_nav_fixed.offsetTop);
                },
                error: function (err) {
                    //KevinShop.MessageBox.Alert(err.responseText);
                    return;
                }
            });
        }

        /*---------------------得到下页商品评论数据--------------------*/
        var isloading = false;
        var counter = 1;
        function getMoreProductComment() {
            if (totalPage == 0) {
                return;
            }
            var pageIndex = $('#showMore').attr('page');
            var type = $('#showMore').attr('type');
            $('#showMore').show().html('加载中...');

            if (pageIndex >= totalPage) {
                $("#showMore").show().html('加载完毕').delay(2300).slideUp(1600);
                return;
            }
            if (isloading) {
                return;
            }
            isloading = true;
            $.ajax({
                type: "GET",
                url: "ProductCommentAjaxRequest?productId=@Model.Product.ProductId&type=" + type + "&pageIndex=" + pageIndex,
                dataType: "JSON",
                success: function (response) {
                    isloading = false;
                    $("#showMore").hide().html('加载更多...');
                    if (response.Data.length) {
                        $('#showMore').attr('page', parseInt(pageIndex) + 1);
                    }
                    $.each(response.Data, function (key, value) {
                        $("#reviewList").append("<div id='div" + counter + "' style='margin-top:100px;opacity:0.3'></div>");
                        var html = '<li>' +
                            '<div class="tboxs">' +
                            '<div class="avarta">' +
                            '<span class="img_wrap">' +
                            '<img width="50" src="/Themes/RongJi/Style/base/imgs/usercenter_head.jpg">' +
                            '</span>' +
                            '<p>' + value.CustomerName + '</p>' +
                            '<p style="align:center;"></p>' +
                            '</div>' +
                            '<div class="cells-title">' +
                            '<p class="comment_content">' + value.Title + '</p>' +
                            '<p>' + value.MemoForamt + '</p>' +
                            '<div class="star-line"><label class="re' + value.Rating + '" data-rate="5">' + value.RatingForamt + '</label></div>' +
                            '<label class="comment_time">' + value.InDateFormated + ' </label>' +
                            '</p>' +
                            '</div>' +
                            //'<div class="cells-details">' +
                            //'<div class="reply" null="">优点：' + value.MeritText + '</div>' +
                            //'<div class="reply" null="">不足：' + value.FaultsTextForamt + '</div>' +
                            //'</div>' +
                            getReviewImageHtml(value.Images) +
                            '</li>';
                        $("#div" + counter).append(html).animate({ opacity: '1', marginTop: 0 }, 2000);
                        counter++;
                    });
                }
            });
        }

        /*---------------------得到分组属性--------------------*/
        $.ajax({
            type: "GET",
            url: "GetProductPropertyGroup?productId=@Model.Product.ProductId",
            dataType: "JSON",
            success: function (response) {
                //没有数据
                if (response.length <= 0) {
                    return;
                }
                var tempPropertyID = 0;
                var $panel = $('#groupPropertyPanel');
                var html = '';
                $.each(response, function (key, value) {
                    if (tempPropertyID != value.PropertyCode) {
                        if (tempPropertyID !== 0) {
                            html += '</dl>';
                        }
                        tempPropertyID = value.PropertyCode;
                        //创建属性
                        html += '<dl><dt>' + value.PropertyName + ':</dt><dd><ul>';
                    }
                    //创建属性值
                    if (value.PropertyValue != null && value.PropertyValue != undefined && value.PropertyValue != "") {
                        html += '<li class=' + value.SelectCss + ' name=' + value.PropertyCode + ' onclick="changeProduct(this);">' + value.PropertyValue + '</li>';
                    }
                    else {
                        html += '<li class=' + value.SelectCss + ' name=' + value.PropertyCode + ' onclick="changeProduct(this);">' + value.UserInput + '</li>';
                    }
                });
                html += '</ul></dd><br class="clearfix"></dl>';
                $panel.append(html);
            },
            error: function (err) {
                //KevinShop.MessageBox.Alert(err.responseText);
                return;
            }
        });

        var app = {
            minusQty: function () {
                var qtyText = $("#quantity").val();
                var qty = parseInt(qtyText);
                if (qty > 1) {
                    qty--;
                } else {
                    KevinShop.MessageBox.Alert("亲，不能再减啦。");
                };
                $("#quantity").val(qty);
            },
            plusQty: function () {
                var qtyText = $("#quantity").val();
                var qty = parseInt(qtyText);
                if (qty < 999) {
                    qty++;
                };
                $("#quantity").val(qty);
            },
            addToShare: function () {
                $('#addToShare').on('click', function () {
                    $('#share-wx-guide').fadeIn(300);
                });
                $('#share-wx-guide').on('click', function () {
                    $(this).fadeOut(300);
                });
            },
            addToCart: function () {
                try {
                    var qty = $("#quantity").val();
                    KevinShop.Common.ShoppingCart.UpdateToCart('@Model.Product.ProductId', qty);
                    KevinShop.MessageBox.Success("添加到购物车成功！");
                    //添加购物车成功后,篮子变成绿色且上面的数字发生变化
                    KevinShop.Common.ShoppingCart.RefreshTotalQty();
                    var total = KevinShop.Common.ShoppingCart.TotalQty;
                    if (total > 0) {
                        $('.cart_badge img').attr('src', '/Themes/RongJi/Style/base/imgs/shopcart_full.png');
                        $(".cart_badge .badge").html(total);
                    }
                    else {
                        $('.cart_badge img').attr('src', '/Themes/RongJi/Style/base/imgs/shopcart_empty.png');
                        $(".cart_badge .badge").html("");
                    }
                } catch (e) {
                    KevinShop.MessageBox.Alert(e);
                }
            },
            getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        };

        var from = app.getUrlParam('from');
        var _ele = $('.goback')[0];
        if (from == 'home') {
            _ele.setAttribute('href', 'javascript:window.history.go(-1)');
        } else {
            _ele.setAttribute('href', '~/Product/ProductList');
        };

        //减去购买的数量
        $("#pndbtnReduce").click(app.minusQty);

        //增加购买的数量
        $("#pndbtnAdd").click(app.plusQty);

        //加入购物车
        $("#addToCart").click(app.addToCart);

        //分享
        window.config.link = 'http://m.rongji365.com/Product/ProductDetail?prd=@Model.Product.ProductId';
        window.config.desc = '@Model.Product.LineDescription.Replace("\r", " ").Replace("\n", " ")';
        window.config.title = '蓉记鲜鲜鲜- @Model.Product.Title';
        window.config.imgUrl = '@Model.Product.ImageNameSize125';
        window.config.img_url = '@Model.Product.ImageNameSize125';//兼容老微信

        app.addToShare();

    });
</script>
    }
}

